/**
 *@auther: tang
 *@Date: 2020-11-16
 *Project: group-booking-shop-manage-system
 */
import React from "react"
import {Button, Table, Tooltip, Modal, Form} from "antd";
import * as Icon from "@ant-design/icons";
import Req from "../../../api";
import {Observer,inject} from "mobx-react"
import "./storeList.css"
import StoreSetting from "./StoreSetting";
import AddStore from "./AddStore";

@inject("permissStore")
@Observer
class StoreList extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            initStores:[],
            loading: false,
            tableLoading:true,
            limit:10,
            page:1,
            modalVis:false,
            confirmLoading:false,
            shopInfo:{},
            addStoreVis:false,
            storeInfo:{}
        }
    }
    onPageChange(page,limit){
        this.setState({
            page,
            limit
        })
    }
    componentWillMount() {
        this.getShopList();
    }

    getShopList(){
        Req.getShopList({limit:this.state.limit,page:this.state.page}).then(res=>{
            let list = res.shop_list;
            list.forEach(item=>{
                item.key=item.shop_id
            })
            console.log(list)
            this.setState({
                initStores:list,
                tableLoading:false
            })
        }).catch(err=>{
            console.log(err)
        })
    }
    handleOk(){
        console.log("确认处理");
        this.setState({
            confirmLoading:true
        })
    }
    handleCancel(){
        this.setState({
            modalVis:false
        })
    }
    showModal(item){
        this.setState({modalVis:true,shopInfo:item});
    }
    handleAddStore(name,vals){
        console.log(name,vals)
       this.setState({
           storeInfo:vals
       })
    }
    handleAddStoreOk(){
        //开启验证
        this.$child.addForm.current.validateFields().then(res=>{
            this.setState({
                confirmLoading:true
            })
            //这里请求，请求成功关闭模态框


        }).catch(err=>{
            console.log(err)
        })

    //    这里请求-----------------------------------------------------
    }
    addStore(){
        this.setState({
            addStoreVis:true
        })
    }
    handleAddCancel(){
        this.setState({
            addStoreVis:false,
            confirmLoading:false
        })
    }
    childEvent = (node)=>{
        this.$child = node;
    }

    render() {
        return (
            <div>
                <Button onClick={this.addStore.bind(this)}>添加商店</Button>
                <Table pagination={{
                    defaultCurrent:this.state.page,
                    pageSize:this.state.limit,
                    onChange: this.onPageChange.bind(this)
                }} loading={{spinning:this.state.tableLoading}}  dataSource={this.state.initStores?this.state.initStores:null}>
                    <Table.Column title="ID" dataIndex="shop_id" key="key"/>
                    <Table.Column title="商店名" dataIndex="shop_name" key="key"/>
                    <Table.Column title="操作" render={(text,record,index)=>{
                        return (<Tooltip title="设置">
                            <Button shape="circle" onClick={this.showModal.bind(this,record)}  icon={<Icon.ToolTwoTone/>}/>
                        </Tooltip>)
                    }} key="key"/>
                </Table>
                <Modal
                    title={`商店/${this.state.shopInfo.shop_name}--${this.state.shopInfo.shop_id}的设置`}
                    visible={this.state.modalVis}
                    onOk={this.handleOk.bind(this)}
                    confirmLoading={this.state.confirmLoading}
                    onCancel={this.handleCancel.bind(this)}
                    centered
                    okText="确定"
                    className="settingModal"
                    destroyOnClose={true}
                    footer={null}
                >
                    <StoreSetting/>
                </Modal>
                <Modal
                    title={`添加一个店铺`}
                    visible={this.state.addStoreVis}
                    onOk={this.handleAddStoreOk.bind(this)}
                    confirmLoading={this.state.confirmLoading}
                    onCancel={this.handleAddCancel.bind(this)}
                    centered
                    okText="确定"
                    className="settingModal"
                    destroyOnClose={true}
                >
                    <AddStore childNode={this.childEvent} onFormChange={this.handleAddStore.bind(this)}/>
                </Modal>
            </div>
        )
    }
}

export {StoreList as default}
